<template>
    <div class="content">
      <div :animation="animationData" class="small_content" >
          <div  class="userinfo " >
            <div  class="userinfo_message">
             <div class="text-white" style="font-size:35rpx;" >{{userInfo.nickName}}</div>
             <div class="userinfo_image">
              <img  class="cu-avatar round lg " v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" /> 
             </div>
            </div>
         </div>
         <div class="oppontinfo">
             <img  class="cu-avatar round lg " v-if="counterInfo.avatarUrl" :src="counterInfo.avatarUrl" background-size="cover" /> 
            <div  class="oppontinfo_message">
             <div class="text-white" style="font-size:35rpx;" >{{counterInfo.nickName}}</div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'jhhh',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      counterInfo: {
        nickName: null,
        avatarUrl: null
      },
      animation: '',
      timer: '',
      animationData: {},
      showModalStatus: false,
      moveHeight: '',
      type: ''
    }
  },
  methods: {
    tanch () {
      const animationDuration = 900
      var _this = this
      setInterval(function () {
        var animation = wx.createAnimation({
          duration: 300,
          timingFunction: 'linear',
          delay: 0
        })
        animation.translateY(_this.moveHeight).step()
        _this.animationData = animation.export()
      }, animationDuration)
    },
    countDown () {
      // clearInterval(this.timer)
      this.countDownNum = 5
      var _this = this
      this.timer = setInterval(function () {
        _this.countDownNum--
        if (_this.countDownNum === 0) {
          clearInterval(_this.timer)
          _this.countDownNum = 5
          if (_this.type === 'human') {
            console.log(_this.type)
            const url = '../battle/main?nickName=' + _this.userInfo.nickName + '&avatarUrl=' + _this.userInfo.avatarUrl + '&counterUrl=' + _this.counterInfo.avatarUrl
            console.log(url)
            wx.navigateTo({url})
          } else {
            console.log('对面是机器人')
            const url = '../rankBattle/main?nickName=' + _this.userInfo.nickName + '&avatarUrl=' + _this.userInfo.avatarUrl + '&counterUrl=' + _this.counterInfo.avatarUrl
            mpvue.navigateTo({url})
          }
        }
      }, 1000)
    },
    openToast () {
      wx.showToast({
        title: '匹配成功',
        icon: 'success',
        duration: 1000,
        mask: false
      })
    },
    getHeight () {
      var _this = this
      wx.getSystemInfo({
        success: function (res) {
          // console.log(res.windowWidth)
          console.log(res.windowHeight)
          _this.moveHeight = res.windowHeight / 2
        }
      })
    }
  },
  onLoad: function (options) {
    console.log('succ:' + options.nickName)
    console.log('type:' + options.type)
    this.userInfo.nickName = options.userInfo_nickName
    this.userInfo.avatarUrl = options.userInfo_avatarUrl
    this.counterInfo.nickName = options.counterInfo_nickName
    this.counterInfo.avatarUrl = options.counterInfo_avatarUrl
    this.type = options.type
    this.openToast()
    this.getHeight()
    this.tanch()
    this.countDown()
  }
}
</script>

<style scoped>
page{
    width: 100%;
    height: 100%;
}
.content{
    position: absolute; 
    width : 100%;
    height : 100%;
    background-image: url("");
   background-repeat:no-repeat; 
   background-size:100% 100%;
   -moz-background-size:100% 100%;
}
.small_content{
  position: absolute;
  width: 100%;
  height: 35%;
  top: -40%
}
.userinfo{
    position: absolute;
    width: 50%;
    top:5%;
    height: 150rpx;
    border-radius:0  45% 45% 0 ;
    display: flex;
    justify-content:flex-end;
    background-image: url('');
    box-shadow: 6rpx 6rpx #999;
    background-repeat:no-repeat; 
   background-size:100% 100%;
   -moz-background-size:100% 100%;
}
.userinfo_message{
   margin: auto 10rpx auto auto ;
   display: flex;
   justify-content:center;
}
.userinfo_image{
  margin: auto 20rpx;
}
.oppontinfo{
    position: absolute;
    width: 50%;
    bottom:5%;
    right:0%;
    height: 150rpx;
    text-align: center;
     display: flex;
    justify-content: flex-start;
    border-radius:45% 0  0 45%  ;
      background-image: url('');
    box-shadow: 6rpx 6rpx #999;
    background-repeat:no-repeat; 
   background-size:100% 100%;
   -moz-background-size:100% 100%;
}
.oppontinfo_message{
margin: auto 50rpx auto 10rpx;
}
.oppontinfo img{
  margin:auto 10rpx auto 30rpx;
}
</style>
